<template>
  <v-scale-screen width="1920" height="1080" :fullScreen="false">
    <div class="screen_container">
      <div class="screen_header">
        <div class="screen_header_btns">

        </div>
        <div class="screen_header_text">元智训数字化学习平台</div>
        <div class="screen_header_btns">
          <div style="display: flex; justify-content: flex-end; width: 100%">
            <div class="time_now">
              <div class="time_now_value">{{ timeNow }}</div>
              <div>
                <div class="year_month_day">
                  {{ yearMonthDay }}
                </div>
                <div class="week_day">
                  {{ weekDay }}
                </div>
              </div>
            </div>
          </div>

          <!--          <div-->
          <!--            @click="btns_type = item.id"-->
          <!--            class="relative screen_header_btn"-->
          <!--            v-for="(item, index) in rightBtnList"-->
          <!--            :key="item.id"-->
          <!--          >-->
          <!--            <img-->
          <!--              v-if="btns_type == item.id"-->
          <!--              class="menu_img"-->
          <!--              src="./images/menued_img.png"-->
          <!--              alt="加载失败"-->
          <!--            />-->
          <!--            <img v-else class="menu_img" src="./images/menu_img.png" alt="加载失败" />-->
          <!--            <div class="menu_text" :class="{ special_text: item.id == 5 }">-->
          <!--              {{ item.text }}-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
      </div>
      <transition name="fade-transform" mode="out-in">
        <div v-show="btns_type == 1" class="screen_connect">
          <div class="screen_connect_left">
            <div class="data_statistics_module">
              <img
                class="left_title"
                src="./images/data_statistics.png"
                alt="加载失败"
              />
              <div class="module_mid">
                <div class="module_mid_left">
                  <img
                    class="stu_person_num"
                    src="./images/stu_person_num.png"
                    alt="加载失败"
                  />
                  <div class="module_mid_left_value">
                    <countTo
                      class="count_to"
                      :startVal="0"
                      :endVal="educationStatistics.studentCount"
                      :autoplay="true"
                      :duration="1500"
                    />
                    <div class="module_mid_left_value_text">参与学生</div>
                  </div>
                </div>
                <div class="module_mid_left">
                  <img
                    class="stu_person_num"
                    src="./images/teacher_person_num.png"
                    alt="加载失败"
                  />
                  <div class="module_mid_left_value">
                    <countTo
                      class="count_to"
                      :startVal="0"
                      :endVal="educationStatistics.teacherCount"
                      :autoplay="true"
                      :duration="1500"
                    />
                    <div class="module_mid_left_value_text">参与教师</div>
                  </div>
                </div>
              </div>
              <div class="module_bottom">
                <div
                  class="module_bottom_item"
                  v-for="(item, index) in arrList"
                  :key="index"
                >
                  <img class="module_bottom_item_img" :src="item.img" alt="加载失败" />
                  <div class="module_bottom_item_value">
                    <div v-if="item.key == 'ossStorage'">
                      <countTo
                        class="count_to"
                        :decimals="2"
                        separator=""
                        :startVal="0"
                        :endVal="
                          educationStatistics[item.key] / 1024 / 1024 / 1024
                        "
                        :autoplay="true"
                        :duration="1200"
                      />
                    </div>
                    <div v-else>
                      <countTo
                        class="count_to"
                        separator=""
                        :startVal="0"
                        :endVal="educationStatistics[item.key]"
                        :autoplay="true"
                        :duration="1200"
                      />
                    </div>
                    <div class="module_bottom_item_value_text">
                      {{ item.text }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="login_detial">
              <img class="left_title" src="./images/login_detial.png" alt="加载失败" />
              <div class="login_detial_chart" ref="loginDetialRef"></div>
            </div>
            <div class="courseware_storage" v-if="!isBranchAdmin">
              <img
                class="left_title"
                src="./images/branch _course_statistics.png"
                alt="加载失败"
              />
              <div class="courseware_chart" ref="threeRef"></div>
            </div>
            <!--     学习预警   分院管理员可看      -->
            <div v-if="isBranchAdmin" class="rebuild_stu_info">
              <!--              <div class="select_btns">-->
              <!--                <div-->
              <!--                  :class="{ checked: showType == 1 }"-->
              <!--                  @click="showType = 1"-->
              <!--                  class="btn_text"-->
              <!--                >-->
              <!--                  重修-->
              <!--                </div>-->
              <!--                <div-->
              <!--                  :class="{ checked: showType == 2 }"-->
              <!--                  @click="showType = 2"-->
              <!--                  class="btn_text"-->
              <!--                >-->
              <!--                  学习-->
              <!--                </div>-->
              <!--              </div>-->
              <img
                v-show="showType == 1"
                class="left_title"
                src="./images/rebuild_stu_info.png"
                alt="加载失败"
              />
              <div v-show="showType == 1" class="lists_group rebuild_pd">
                <div class="lists_header">
                  <div class="lists_header_item w_80">分院</div>
                  <div class="lists_header_item w_80">专业</div>
                  <div class="lists_header_item w_80">班级</div>
                  <div class="lists_header_item w_50">姓名</div>
                  <!--                  <div class="lists_header_item w_70">-->
                  <!--                    课程名称-->
                  <!--                  </div>-->
                  <div class="lists_header_item w_70">重修次数</div>
                </div>
                <div ref="review" class="rebuildList_branch_admin">
                  <div ref="elList">
                    <div
                      v-for="(item) in restartStudentList"
                      :key="item.id"
                      class="lists_body"
                    >
                      <div class="lists_body_item w_80">
                        <tooltip
                          position="top"
                          :text="item.branchName"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_80">
                        <tooltip
                          position="top"
                          :text="item.majorName"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_80">
                        <tooltip
                          position="top"
                          :text="item.className"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_50">
                        <tooltip
                          position="top"
                          :text="item.studentName"
                          width="100%"
                        />
                      </div>
                      <!--                      <div class="lists_body_item w_70">-->
                      <!--                        <el-tooltip effect="dark" :content="item.courseName" placement="top">-->
                      <!--                          <div class="course_name">{{ item.courseName }}</div>-->
                      <!--                        </el-tooltip>-->
                      <!--                      </div>-->
                      <div class="lists_body_item w_70">
                        {{
                          item.courseInfoList
                            ? retuenToralNum(item.courseInfoList)
                            : 0
                        }}
                      </div>
                    </div>
                  </div>
                  <div ref="elList_copy"></div>
                </div>
              </div>

              <img
                v-show="showType == 2"
                class="left_title"
                src="./images/learning_warning.png"
                alt="加载失败"
              />
              <div v-show="showType == 2" class="lists_group study_pd">
                <div class="lists_header">
                  <!--                  <div class="lists_header_item w_50">-->
                  <!--                    分院-->
                  <!--                  </div>-->
                  <!--                  <div class="lists_header_item w_50">-->
                  <!--                    专业-->
                  <!--                  </div>-->
                  <div class="lists_header_item w_100">班级</div>
                  <div class="lists_header_item w_50">姓名</div>
                  <div class="lists_header_item w_70">课程名称</div>
                  <div class="lists_header_item w_70">平均进度</div>
                  <div class="lists_header_item w_70">该生进度</div>
                </div>
                <div ref="studyReview" class="rebuildList_branch_admin">
                  <div ref="studyList">
                    <div
                      v-for="(item, index) in studyWarningList"
                      :key="index"
                      class="lists_body"
                    >
                      <!--                      <div class="lists_body_item w_50">-->
                      <!--                        <el-tooltip effect="dark" :content="item.branchName" placement="top">-->
                      <!--                          <div class="course_name">{{ item.branchName }}</div>-->
                      <!--                        </el-tooltip>-->
                      <!--                      </div>-->
                      <!--                      <div class="lists_body_item w_50">-->
                      <!--                        <el-tooltip effect="dark" :content="item.majorName" placement="top">-->
                      <!--                          <div class="course_name">{{ item.majorName }}</div>-->
                      <!--                        </el-tooltip>-->
                      <!--                      </div>-->
                      <div class="lists_body_item w_100">
                        <tooltip
                          position="top"
                          :text="item.className"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_50">
                        <tooltip
                          position="top"
                          :text="item.studentName"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_70">
                        <tooltip
                          position="top"
                          :text="item.courseName"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_70">
                        {{ item.avgLearningProgress }}%
                      </div>
                      <div class="lists_body_item w_70">
                        {{ item.learningProgress }}%
                      </div>
                    </div>
                  </div>
                  <div ref="studyList_copy"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="screen_connect_mid">
            <div class="school_name">
              {{
                $store.getters.schoolInfo
                  ? $store.getters.schoolInfo.schoolName
                  : ""
              }}
            </div>
            <div class="branch_name">{{ educationStatistics.branchName }}</div>
            <div class="medium_all">
              <el-carousel
                type="card"
                height="200px"
                arrow="never"
                indicator-position="none"
                :autoplay="false"
              >
                <el-carousel-item
                  v-for="(item, index) in leaderBoard"
                  :key="index"
                >
                  <div class="medium">
                    <countTo
                      class="count_to"
                      separator=""
                      :startVal="0"
                      :endVal="educationStatistics[item.key]"
                      :autoplay="true"
                      :duration="1500"
                    />
                    <!--                    <countTo v-if="item.text=='在线人数'" class="count_to" separator='' :startVal='0' :endVal='educationStatistics[item.key]' :autoplay="true" :duration='1500'/>-->
                    <div class="medium_text">{{ item.text }}</div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="average_course_progress">
              <img
                class="left_title"
                src="./images/average_course_progress.png"
                alt="加载失败"
              />
              <div class="lists_group study_pd">
                <div class="lists_header">
                  <div class="lists_header_item w_140">课程名称</div>
                  <div class="lists_header_item w_140">分院</div>
                  <div class="lists_header_item w_90">关联工作站</div>
                  <!--                  <div class="lists_header_item w_90">-->
                  <!--                    工作站地址-->
                  <!--                  </div>-->
                  <div class="lists_header_item w_80">负责人</div>
                  <div class="lists_header_item w_120">平均学习进度</div>
                </div>
                <div ref="progressReview" class="progressList">
                  <div ref="progressList">
                    <div
                      v-for="(item) in courseLearningProgressList"
                      :key="item.courseId"
                      class="lists_body"
                    >
                      <div class="lists_body_item w_140">
                        <tooltip
                          position="top"
                          :text="item.courseName"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_140">
                        <tooltip
                          position="top"
                          :text="item.branchName"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_90">
                        <tooltip
                          position="top"
                          :text="
                            item.workstationName ? item.workstationName : '暂无'
                          "
                          width="100%"
                        />
                      </div>
                      <!--                      <div class="lists_body_item w_90">-->
                      <!--                        <el-tooltip effect="dark" :content="item.workstationAddress?item.workstationAddress:'暂无'" placement="top">-->
                      <!--                          <div class="course_name">{{ item.workstationAddress?item.workstationAddress:'暂无' }}</div>-->
                      <!--                        </el-tooltip>-->
                      <!--                      </div>-->
                      <div class="lists_body_item w_80">
                        <tooltip
                          position="top"
                          :text="
                            item.principalName ? item.principalName : '暂无'
                          "
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_120">
                        {{ item.learningProgress }}%
                      </div>
                    </div>
                  </div>
                  <div ref="progressList_copy"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="screen_connect_right">
            <!--      受欢迎课程      -->
            <div v-if="true" class="resource_usage_school">
              <img
                class="left_title"
                src="./images/excellent_course.png"
                alt="加载失败"
              />
              <div class="lists_group excellentCourse_pd">
                <div class="lists_header">
                  <!--                  <div class="lists_header_item w_50">-->
                  <!--                    名次-->
                  <!--                  </div>-->
                  <div class="lists_header_item w_100">课程名称</div>
                  <div class="lists_header_item w_100">分院</div>
                  <div class="lists_header_item w_80">老师</div>
                  <div class="lists_header_item w_80">评价均分</div>
                </div>
                <div
                  ref="excellentCourseReview"
                  :class="
                    isBranchAdmin
                      ? 'excellentCourseList_branch_admin'
                      : 'excellentCourseList'
                  "
                >
                  <div ref="excellentCourseList">
                    <div
                      v-for="(item, index) in excellentCourseList"
                      :key="index"
                      class="lists_body"
                    >
                      <div class="lists_body_item w_100">
                        <tooltip
                          position="top"
                          :text="item.courseName"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_100">
                        <tooltip
                          position="top"
                          :text="item.branchName"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_80">
                        {{ item.principalName }}
                      </div>
                      <div class="lists_body_item w_80">
                        {{
                          item.courseStar && item.courseStar != 0
                            ? item.courseStar
                            : "暂无"
                        }}
                      </div>
                    </div>
                  </div>
                  <div ref="excellentCourseList_copy"></div>
                </div>
              </div>
            </div>
            <!--      课程点击量 只针对萧山学校开放     -->
            <div v-if="false" class="resource_usage_school">
              <img class="left_title" src="./images/course_clicks.png" alt="加载失败" />
              <div class="lists_group excellentCourse_pd">
                <div class="lists_header">
                  <!--                  <div class="lists_header_item w_50">-->
                  <!--                    名次-->
                  <!--                  </div>-->
                  <div class="lists_header_item w_180">课程名称</div>
                  <div class="lists_header_item w_140">分院</div>
                  <div class="lists_header_item w_80">点击量</div>
                </div>
                <div
                  ref="excellentCourseReview"
                  :class="
                    isBranchAdmin
                      ? 'excellentCourseList_branch_admin'
                      : 'excellentCourseList'
                  "
                >
                  <div ref="excellentCourseList">
                    <div
                      v-for="(item, index) in activeCourseList"
                      :key="index"
                      class="lists_body"
                    >
                      <div class="lists_body_item w_180">
                        <tooltip
                          position="top"
                          :text="item.courseName"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_140">
                        <tooltip
                          position="top"
                          :text="item.branchName"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_80">
                        {{ item.clickData }}
                      </div>
                    </div>
                  </div>
                  <div ref="excellentCourseList_copy"></div>
                </div>
              </div>
            </div>

            <!--     优秀学生       -->
            <div class="top_student">
              <div class="map_btns">
                <div
                  :class="{ checked: showTopType == 1 }"
                  @click="showTopType = 1"
                  class="btn_text"
                >
                  必学成绩
                </div>
                <div
                  :class="{ checked: showTopType == 2 }"
                  @click="showTopType = 2"
                  class="btn_text"
                >
                  附加任务
                </div>
              </div>
              <img class="left_title" src="./images/top_student.png" alt="加载失败" />
              <div v-if="showTopType == 1" class="lists_group topStudent_pd">
                <div class="lists_header">
                  <div class="lists_header_item w_50">名次</div>
                  <div class="lists_header_item w_60">姓名</div>
                  <div class="lists_header_item w_100">班级</div>
                  <div class="lists_header_item w_70">学号</div>
                  <div class="lists_header_item w_90">考核均分</div>
                </div>
                <div
                  ref="topStudentReview"
                  :class="
                    isBranchAdmin
                      ? 'topStudentList_branch_admin'
                      : 'topStudentList'
                  "
                >
                  <div ref="topStudentList">
                    <div
                      v-for="(item, index) in topStudentList"
                      :key="index"
                      class="lists_body"
                    >
                      <div class="lists_body_item w_50">
                        {{ item.sort }}
                      </div>
                      <div class="lists_body_item w_60">
                        <tooltip
                          position="top"
                          :text="item.studentName"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_100">
                        <tooltip
                          position="top"
                          :text="item.className"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_70">
                        <tooltip
                          position="top"
                          :text="item.studentNum"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_90">
                        {{ item.scorePercent }}
                      </div>
                    </div>
                  </div>
                  <div ref="topStudentList_copy"></div>
                </div>
              </div>
              <div v-if="showTopType == 2" class="lists_group topStudent_pd">
                <div class="lists_header">
                  <div class="lists_header_item w_50">名次</div>
                  <div class="lists_header_item w_60">姓名</div>
                  <div class="lists_header_item w_100">班级</div>
                  <div class="lists_header_item w_70">学号</div>
                  <div class="lists_header_item w_100">完成附加任务</div>
                </div>
                <div
                  ref="topStudentSelectReview"
                  :class="
                    isBranchAdmin
                      ? 'topStudentList_branch_admin'
                      : 'topStudentList'
                  "
                >
                  <div ref="topStudentSelectList">
                    <div
                      v-for="(item, index) in topStudentSelectList"
                      :key="index"
                      class="lists_body"
                    >
                      <div class="lists_body_item w_50">
                        {{ item.sort }}
                      </div>
                      <div class="lists_body_item w_60">
                        <tooltip
                          position="top"
                          :text="item.studentName"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_100">
                        <tooltip
                          position="top"
                          :text="item.className"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_70">
                        <tooltip
                          position="top"
                          :text="item.studentNum"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_100">
                        {{ item.taskNum }}
                      </div>
                    </div>
                  </div>
                  <div ref="topStudentSelectList_copy"></div>
                </div>
              </div>
            </div>

            <!--     学习预警       -->
            <div v-if="!isBranchAdmin" class="rebuild_stu_info">
              <!--              <div class="map_btns">-->
              <!--                <div-->
              <!--                  :class="{ checked: showType == 1 }"-->
              <!--                  @click="showType = 1"-->
              <!--                  class="btn_text"-->
              <!--                >-->
              <!--                  重修-->
              <!--                </div>-->
              <!--                <div-->
              <!--                  :class="{ checked: showType == 2 }"-->
              <!--                  @click="showType = 2"-->
              <!--                  class="btn_text"-->
              <!--                >-->
              <!--                  学习-->
              <!--                </div>-->
              <!--              </div>-->

              <img
                v-show="showType == 1"
                class="left_title"
                src="./images/rebuild_stu_info.png"
                alt="加载失败"
              />
              <div v-show="showType == 1" class="lists_group rebuild_pd">
                <div class="lists_header">
                  <div class="lists_header_item w_80">分院</div>
                  <div class="lists_header_item w_80">专业</div>
                  <div class="lists_header_item w_80">班级</div>
                  <div class="lists_header_item w_50">姓名</div>
                  <!--                  <div class="lists_header_item w_70">-->
                  <!--                    课程名称-->
                  <!--                  </div>-->
                  <div class="lists_header_item w_70">重修次数</div>
                </div>
                <div ref="review" class="rebuildList">
                  <div ref="elList">
                    <div
                      v-for="(item) in restartStudentList"
                      :key="item.id"
                      class="lists_body"
                    >
                      <div class="lists_body_item w_80">
                        <tooltip
                          position="top"
                          :text="item.branchName"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_80">
                        <tooltip
                          position="top"
                          :text="item.majorName"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_80">
                        <tooltip
                          position="top"
                          :text="item.className"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_50">
                        <tooltip
                          position="top"
                          :text="item.studentName"
                          width="100%"
                        />
                      </div>
                      <!--                      <div class="lists_body_item w_70">-->
                      <!--                        <el-tooltip effect="dark" :content="item.courseName" placement="top">-->
                      <!--                          <div class="course_name">{{ item.courseName }}</div>-->
                      <!--                        </el-tooltip>-->
                      <!--                      </div>-->
                      <div class="lists_body_item w_70">
                        {{
                          item.courseInfoList
                            ? retuenToralNum(item.courseInfoList)
                            : 0
                        }}
                      </div>
                    </div>
                  </div>
                  <div ref="elList_copy"></div>
                </div>
              </div>

              <img
                v-show="showType == 2"
                class="left_title"
                src="./images/learning_warning.png"
                alt="加载失败"
              />
              <div v-show="showType == 2" class="lists_group study_pd">
                <div class="lists_header">
                  <!--                  <div class="lists_header_item w_50">-->
                  <!--                    分院-->
                  <!--                  </div>-->
                  <!--                  <div class="lists_header_item w_50">-->
                  <!--                    专业-->
                  <!--                  </div>-->
                  <div class="lists_header_item w_100">班级</div>
                  <div class="lists_header_item w_50">姓名</div>
                  <div class="lists_header_item w_70">课程名称</div>
                  <div class="lists_header_item w_70">平均进度</div>
                  <div class="lists_header_item w_70">该生进度</div>
                </div>
                <div ref="studyReview" class="rebuildList">
                  <div ref="studyList">
                    <div
                      v-for="(item, index) in studyWarningList"
                      :key="index"
                      class="lists_body"
                    >
                      <!--                      <div class="lists_body_item w_50">-->
                      <!--                        <el-tooltip effect="dark" :content="item.branchName" placement="top">-->
                      <!--                          <div class="course_name">{{ item.branchName }}</div>-->
                      <!--                        </el-tooltip>-->
                      <!--                      </div>-->
                      <!--                      <div class="lists_body_item w_50">-->
                      <!--                        <el-tooltip effect="dark" :content="item.majorName" placement="top">-->
                      <!--                          <div class="course_name">{{ item.majorName }}</div>-->
                      <!--                        </el-tooltip>-->
                      <!--                      </div>-->
                      <div class="lists_body_item w_100">
                        <tooltip
                          position="top"
                          :text="item.className"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_50">
                        <tooltip
                          position="top"
                          :text="item.studentName"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_70">
                        <tooltip
                          position="top"
                          :text="item.courseName"
                          width="100%"
                        />
                      </div>
                      <div class="lists_body_item w_70">
                        {{ item.avgLearningProgress }}%
                      </div>
                      <div class="lists_body_item w_70">
                        {{ item.learningProgress }}%
                      </div>
                    </div>
                  </div>
                  <div ref="studyList_copy"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
      <transition name="fade-transform" mode="out-in">
        <dataTable
          :tableData="tableData"
          :tableHeader="tableHeader"
          :tableTitle="tableTitle"
          :btns_type="btns_type"
          v-show="btns_type == 2"
        ></dataTable>
      </transition>
      <transition name="fade-transform" mode="out-in">
        <dataTable
          :tableData="tableData"
          :tableHeader="tableHeader"
          :tableTitle="tableTitle"
          :btns_type="btns_type"
          v-show="btns_type == 3"
        ></dataTable>
      </transition>
      <transition name="fade-transform" mode="out-in">
        <dataTable
          :tableData="tableData"
          :tableHeader="tableHeader"
          :tableTitle="tableTitle"
          :btns_type="btns_type"
          v-show="btns_type == 4"
        ></dataTable>
      </transition>
      <transition name="fade-transform" mode="out-in">
        <dataTable
          :tableData="tableData"
          :tableHeader="tableHeader"
          :tableTitle="tableTitle"
          :btns_type="btns_type"
          v-show="btns_type == 5"
        ></dataTable>
      </transition>
      <transition name="fade-transform" mode="out-in">
        <dataTable
          :tableData="tableData"
          :tableHeader="tableHeader"
          :tableTitle="tableTitle"
          :btns_type="btns_type"
          v-show="btns_type == 6"
        ></dataTable>
      </transition>
      <transition name="fade-transform" mode="out-in">
        <dataTable
          :tableData="tableData"
          :tableHeader="tableHeader"
          :tableTitle="tableTitle"
          :btns_type="btns_type"
          v-show="btns_type == 7"
        ></dataTable>
      </transition>
    </div>
  </v-scale-screen>
</template>

<script>
import {
  courseDatalist,
  courseDatalistHeader,
  reStartCourseData,
  reStartCourseDataHeader,
  studentDatalist,
  studentDatalistHeader,
  studyWarn,
  studyWarnHeader,
  teacherDatalist,
  teacherDatalistHeader,
  workstationDatalist,
  workstationDatalistHeader,
} from "@/api/statistics/platformData";
import {
  courseLearningProgress,
  educationResourceStatistics,
  restartStudentStatistics,
  userLoginStatistics,
  topStudentStatistics,
  leamingWarningStatistics,
  branchCourseStatistics,
  excellentCourseStatistics,
  activeCourseStatistics,
} from "@/api/statistics/statistics";
import { getPie3D, getParametricEquation } from "./chart.js"; //工具类js
import dataTable from "./components/dataTable";
import scaleBox from "./components/scaleBox";
import * as echarts from "echarts";
import "echarts-gl"; // 3d图表库

import countTo from "vue-count-to";

export default {
  name: "schoolTubeScreen",
  components: {
    countTo,
    scaleBox,
    dataTable,
  },
  data() {
    return {
      timeNow: "00:00:00",
      yearMonthDay: "2023年03月25日",
      weekDay: "星期五",
      //中间排行榜数据
      leaderBoard: [
        {
          key: "loginNow",
          text: "在线人数",
        },
        {
          key: "loginCount",
          text: "今日登录人数",
        },
        {
          key: "activeCourseCount",
          text: "今日浏览课程",
        },
      ],
      //header左边按钮
      leftBtnList: [
        {
          id: 1,
          text: "数据统计",
        },
        {
          id: 2,
          text: "课程数据",
        },
        {
          id: 3,
          text: "教师数据",
        },
        {
          id: 4,
          text: "学生数据",
        },
      ],
      //header右边按钮
      rightBtnList: [
        {
          id: 5,
          text: "工作站数据",
        },
        {
          id: 6,
          text: "学习预警",
        },
        {
          id: 7,
          text: "重修情况",
        },
      ],
      //header按钮类型
      btns_type: 1,
      //数据统计
      arrList: [
        {
          img: require("./images/branch_num.png"),
          value: 2,
          text: "正式课程",
          key: "formalCourse",
        },
        {
          img: require("./images/profession_num.png"),
          value: 20,
          text: "草稿课程",
          key: "temporaryCourse",
        },
        // {
        //   img: require("./images/workstation_num.png"),
        //   value: 20,
        //   text: "工作站数量",
        //   key: "workstationNum",
        // },
        {
          img: require("./images/class_num_img.png"),
          value: 20,
          text: "工学一体",
          key: "etCourse",
        },
        {
          img: require("./images/course_num_img.png"),
          value: 20,
          text: "题目数量",
          key: "topicCount",
        },
        {
          img: require("./images/draft.png"),
          value: 20,
          text: "考核人次",
          key: "examPaperCount",
        },
        {
          img: require("./images/engineering.png"),
          value: 20,
          text: "课程点击量",
          key: "courseClickCount",
        },
        // {
        //   img: require("./images/oss_num_img.png"),
        //   value: 20,
        //   text: "存储量(GB)",
        //   key: "ossStorage",
        // },
      ],
      // 3d环形图数据
      optionData: [
        // {
        //   name:item.branchName,
        //   value:item.courseNum
        // }
      ],
      // 3d环形图表
      statusChart: null,
      //3d环形图数据总数
      total: 0,
      //3d环形图配置项
      option: {},

      // 课程平均进度列表
      courseLearningProgressList: [],
      // 重修学生情况
      restartStudentList: [],
      // 优秀课程
      excellentCourseList: [],
      //活跃课程统计
      activeCourseList: [],
      // 拔尖学生必学
      topStudentList: [],
      // 拔尖学生选学
      topStudentSelectList: [],
      // 数据统计--数据对象
      educationStatistics: {
        totalCourseCount: 0,
        activeCourseCount:0,
        loginNow:0,
        loginCount:0,
        formalCourse: 0,
        temporaryCourse: 0,
        etCourse: 0,
        topicCount: 0,
        examPaperCount: 0,
        courseClickCount: 0,
        studentCount: 0,
        teacherCount: 0,
      },
      //用户登录统计
      userLoginData: {
        loginNow: 0,
        loginToday: 0,
        activeCourses: 0,
      },
      showType: 2,
      showTopType: 1,
      // 学习预警
      studyWarningList: [],
      //定时器
      timer: null,
      studyTimer: null,
      progressTimer: null,
      excellentCourseTimer: null,
      topStudentTimer: null,
      topStudentSelectTimer: null,
      //课程列表
      tableTitle: "",
      tableHeader: [],
      tableData: [],
      //是否为分院管理员
      isBranchAdmin: false,
    };
  },
  watch: {
    btns_type: {
      immediate: true,
      async handler(val) {

        if (val == 1) {
          this.$nextTick(() => {
            //课程平均进度
            this.roll(
              50,
              "progressList",
              "progressList_copy",
              "progressReview",
              "progressTimer"
            );
            //优秀课程
            this.roll(
              50,
              "excellentCourseList",
              "excellentCourseList_copy",
              "excellentCourseReview",
              "excellentCourseTimer"
            );
          });
        }
        // 获取课程数据
        else if (val == 2) {
          let res = await courseDatalist(
            this.$store.getters.roleId == "branchAdmin" ? "branch" : "manager"
          );
          this.tableTitle = "课程数据";
          this.tableData = res.rows;
          this.tableHeader = courseDatalistHeader;
        }
        // 获取教师数据
        else if (val == 3) {
          let res = await teacherDatalist(
            this.$store.getters.roleId == "branchAdmin" ? "branch" : "manager"
          );
          this.tableTitle = "教师数据";
          this.tableData = res.rows;
          this.tableHeader = teacherDatalistHeader;
        }
        // 获取学生数据
        else if (val == 4) {
          let res = await studentDatalist(
            this.$store.getters.roleId == "branchAdmin" ? "branch" : "manager"
          );
          this.tableTitle = "学生数据";
          this.tableData = res.rows;
          this.tableHeader = studentDatalistHeader;
        }
        // 获取工作站数据
        else if (val == 5) {
          let res = await workstationDatalist(
            this.$store.getters.roleId == "branchAdmin" ? "branch" : "manager"
          );
          this.tableTitle = "工作站数据";
          this.tableData = res.rows;
          this.tableHeader = workstationDatalistHeader;
        }
        // 获取学习预警
        else if (val == 6) {
          let res = await studyWarn(
            this.$store.getters.roleId == "branchAdmin" ? "branch" : "manager"
          );
          this.tableTitle = "学习预警";

          this.tableData = res.rows;
          this.tableHeader = studyWarnHeader;
        }
        // 获取重修情况
        else if (val == 7) {
          let res = await reStartCourseData(
            this.$store.getters.roleId == "branchAdmin" ? "branch" : "manager"
          );
          this.tableTitle = "重修情况";
          this.tableData = res.rows;
          this.tableHeader = reStartCourseDataHeader;
        }
        if (val != 1) {
          this.clearAllTimer();
        }
      },
    },
    showType: {
      immediate: true,
      handler(val) {
        clearInterval(this.timer);
        clearInterval(this.studyTimer);
        this.$nextTick(() => {
          if (val == 1) {
            //获取重修学生情况
            this.restartStudentStatistics();
          }
          if (val == 2) {
            //获取学习预警数据
            this.leamingWarningStatistics();
          }
        });
      },
    },
    showTopType: {
      immediate: true,
      handler(val) {
        clearInterval(this.topStudentTimer);
        clearInterval(this.topStudentSelectTimer);
        this.$nextTick(() => {
          //拔尖学生     val:1 必修   val:2 选修
          if (val == 1) {
            this.topStudentStatistics(val, 50);
          }
          if (val == 2) {
            this.topStudentStatistics(val, 50);
          }
        });
      },
    },
  },
  beforeDestroy() {
    this.clearAllTimer();
  },
  created() {
    //时间定时器
    this.getNowDate();
    let timer = setInterval(() => {
      this.getNowDate();
    }, 1000);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });

    this.isBranchAdmin = this.$store.getters.roleId == "branchAdmin";
    //获取课程平均进度
    this.courseLearningProgress();
    //获取数据统计
    this.educationResourceStatistics();
    // 优秀课程统计
    this.excellentCourseStatistics();
    // 活跃课程统计
    this.activeCourseStatistics();
    //5min更新一次数据
    let timer2 = setInterval(() => {
      this.courseLearningProgress();
      this.userLoginStatistics();
      this.excellentCourseStatistics();
      this.leamingWarningStatistics();
      clearInterval(this.topStudentTimer);
      clearInterval(this.topStudentSelectTimer);
      clearInterval(this.timer);
      clearInterval(this.studyTimer);
      this.topStudentStatistics(this.showTopType, 50);
    }, 5 * 60 * 1000);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer2);
    });
  },
  mounted() {
    //用户登录统计
    this.userLoginStatistics();
    //校管才能看
    if (!this.isBranchAdmin) {
      // 各分院课程统计
      this.branchCourseStatistics();
    }
  },
  methods: {
    getNowDate() {
      let now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let date = now.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      let daysOfWeek = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      this.weekDay = daysOfWeek[now.getDay()];
      this.yearMonthDay = `${year}年${month}月${date}日`;
      let hour = now.getHours();
      let minute = now.getMinutes();
      let second = now.getSeconds();
      if (second < 10) {
        second = "0" + second;
      }
      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      this.timeNow = `${hour}:${minute}:${second}`;
    },
    clearAllTimer() {
      clearInterval(this.timer);
      clearInterval(this.studyTimer);
      clearInterval(this.progressTimer);
      clearInterval(this.excellentCourseTimer);
      clearInterval(this.topStudentTimer);
      clearInterval(this.topStudentSelectTimer);
    },
    //获取课程平均进度
    async courseLearningProgress() {
      let params;
      if (this.$store.getters.roleId == "branchAdmin") {
        params = {
          branchId: this.$store.getters.branchId,
        };
      }
      let res = await courseLearningProgress(params);
      if (res.code == 200) {
        this.courseLearningProgressList = res.data;
      }
    },
    //获取数据统计
    async educationResourceStatistics() {
      let params;
      if (this.$store.getters.roleId == "branchAdmin") {
        params = {
          branchId: this.$store.getters.branchId,
        };
      }
      let res = await educationResourceStatistics(params);
      if (res.code == 200) {
        console.log(res.data, "sssssssdfdnjksfnskjf");
        this.educationStatistics = res.data;
      }
    },
    //获取重修学生情况
    async restartStudentStatistics() {
      let params;
      if (this.$store.getters.roleId == "branchAdmin") {
        params = {
          branchId: this.$store.getters.branchId,
        };
      }
      let res = await restartStudentStatistics(params);
      if (res.code == 200) {
        this.restartStudentList = res.data;
        if (this.restartStudentList.length > 3) {
          this.roll(50, "elList", "elList_copy", "review", "timer");
        }
      }
    },
    //获取拔尖学生数据
    async topStudentStatistics(type, limit) {
      this.topStudentList = [];
      this.topStudentSelectList = [];
      let params;
      if (this.$store.getters.roleId == "branchAdmin") {
        params = {
          branchId: this.$store.getters.branchId,
        };
      }
      let res = await topStudentStatistics(type, limit, params);
      if (res.code == 200) {
        if (type == 1) {
          this.topStudentList = res.data;
          if (this.topStudentList.length > 6) {
            this.roll(
              50,
              "topStudentList",
              "topStudentList_copy",
              "topStudentReview",
              "topStudentTimer"
            );
          }
        } else {
          this.topStudentSelectList = res.data;
          if (this.topStudentSelectList.length > 6) {
            this.roll(
              50,
              "topStudentSelectList",
              "topStudentSelectList_copy",
              "topStudentSelectReview",
              "topStudentSelectTimer"
            );
          }
        }
      }
    },
    //获取拔尖学生数据
    async leamingWarningStatistics() {
      let params;
      if (this.$store.getters.roleId == "branchAdmin") {
        params = {
          branchId: this.$store.getters.branchId,
        };
      }
      let res = await leamingWarningStatistics(params);
      if (res.code == 200) {
        this.studyWarningList = res.data;
        if (this.studyWarningList.length > 3) {
          this.roll(
            50,
            "studyList",
            "studyList_copy",
            "studyReview",
            "studyTimer"
          );
        }
      }
    },
    //用户登录统计
    async userLoginStatistics() {
      let params;
      if (this.$store.getters.roleId == "branchAdmin") {
        params = {
          branchId: this.$store.getters.branchId,
        };
      }
      let res = await userLoginStatistics(7, params);
      if (res.code == 200) {
        this.userLoginData = res.data;
        this.setLoginDetialRef();
      }
    },
    //各分院课程统计
    async branchCourseStatistics() {
      this.optionData = [];
      let params;
      if (this.$store.getters.roleId == "branchAdmin") {
        params = {
          branchId: this.$store.getters.branchId,
        };
      }
      let res = await branchCourseStatistics(params);
      if (res.code == 200) {
        let obj;
        if (res.data && res.data.length > 0) {
          for (const item of res.data) {
            obj = {
              name: item.branchName,
              value: item.courseNum,
            };
            this.optionData.push(obj);
          }
          this.setLabel();
        }
      }
    },
    retuenToralNum(arr) {
      let total = 0;
      for (const arrElement of arr) {
        total += arrElement.restartCount;
      }
      return total;
    },
    //优秀课程统计
    async excellentCourseStatistics() {
      let params;
      if (this.$store.getters.roleId == "branchAdmin") {
        params = {
          branchId: this.$store.getters.branchId,
        };
      }
      let res = await excellentCourseStatistics(params);
      if (res.code == 200) {
        this.excellentCourseList = res.data;
      }
    },
    //活跃课程统计
    async activeCourseStatistics() {
      let params;
      if (this.$store.getters.roleId == "branchAdmin") {
        params = {
          branchId: this.$store.getters.branchId,
        };
      }
      let res = await activeCourseStatistics(params);
      if (res.code == 200) {
        res.data.map((value, index) => {
          value.clickData = 25817 - index * 345 + value.activeCount * 23;
        });
        this.activeCourseList = res.data;
        this.activeCourseList.sort(() => Math.random() - 0.5);
      }
    },

    // 初始化label样式    3d环形图start>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    setLabel() {
      const color = [
        "#a45fea",
        "#4c8af7",
        "#65c8c9",
        "#73c67a",
        "#f5d358",
        "#e7566b",
      ];
      this.optionData.forEach((item, index) => {
        this.total += item.value;
        item.itemStyle = {
          color: color[index],
        };
        item.label = {
          normal: {
            show: true,
            color: color[index],
            formatter: ["{b|{b}}", "{c|{c}}{b|台}", "{d|{d}%}"].join("\n"), // 用\n来换行
            rich: {
              b: {
                color: "#fff",
                lineHeight: 25,
                align: "left",
              },
              c: {
                fontSize: 22,
                color: "#fff",
                textShadowColor: "#1c90a6",
                textShadowOffsetX: 0,
                textShadowOffsetY: 2,
                textShadowBlur: 5,
              },
              d: {
                color: color[index],
                align: "left",
              },
            },
          },
        };
        item.labelLine = {
          normal: {
            lineStyle: {
              width: 1,
              color: "rgba(255,255,255,0.7)",
            },
          },
        };
      });
      this.initChart();
    },
    // 图表初始化
    initChart() {
      this.statusChart = echarts.init(this.$refs.threeRef);
      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
      this.option = getPie3D(this.optionData, 0.8, 240, 28, 26, 0.6);
      this.statusChart.setOption(this.option);
      this.bindListen(this.statusChart);
    },
    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
    // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
    bindListen(myChart, optionName = "option") {
      let hoveredIndex = "";
      // 监听 mouseover，近似实现高亮（放大）效果
      myChart.on("mouseover", (params) => {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {
          // 否则进行高亮及必要的取消高亮操作
        } else {
          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
          if (hoveredIndex !== "") {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
            isSelected =
              this[optionName].series[hoveredIndex].pieStatus.selected;
            isHovered = false;
            startRatio =
              this[optionName].series[hoveredIndex].pieData.startRatio;
            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
            k = this[optionName].series[hoveredIndex].pieStatus.k;
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            this[optionName].series[hoveredIndex].parametricEquation =
              getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                this[optionName].series[hoveredIndex].pieData.value
              );
            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = "";
          }
          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
          if (
            params.seriesName !== "mouseoutSeries" &&
            params.seriesName !== "pie2d"
          ) {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
            isSelected =
              this[optionName].series[params.seriesIndex].pieStatus.selected;
            isHovered = true;
            startRatio =
              this[optionName].series[params.seriesIndex].pieData.startRatio;
            endRatio =
              this[optionName].series[params.seriesIndex].pieData.endRatio;
            k = this[optionName].series[params.seriesIndex].pieStatus.k;
            // 对当前点击的扇形，执行高亮操作（对 option 更新）
            this[optionName].series[params.seriesIndex].parametricEquation =
              getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                this[optionName].series[params.seriesIndex].pieData.value + 60
              );
            this[optionName].series[params.seriesIndex].pieStatus.hovered =
              isHovered;
            // 记录上次高亮的扇形对应的系列号 seriesIndex
            hoveredIndex = params.seriesIndex;
          }
          // 使用更新后的 option，渲染图表
          myChart.setOption(this[optionName]);
        }
      });
      // 修正取消高亮失败的 bug
      myChart.on("globalout", () => {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        if (hoveredIndex !== "") {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
          isHovered = false;
          k = this[optionName].series[hoveredIndex].pieStatus.k;
          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
          this[optionName].series[hoveredIndex].parametricEquation =
            getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              this[optionName].series[hoveredIndex].pieData.value
            );
          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
          hoveredIndex = "";
        }
        // 使用更新后的 option，渲染图表
        myChart.setOption(this[optionName]);
      });
    },
    // 3d环形图end>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    //登陆情况柱状图
    setLoginDetialRef() {
      let myChart = echarts.init(this.$refs.loginDetialRef);
      // let colorList = ["#5087ec"]
      let option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          left: "center",
          itemGap: 10,
          textStyle: {
            color: "#ffffff",
          },
        },
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            data: this.userLoginData.studentLoginData.xAxis.data,
            splitLine: { show: false }, //去除网格线
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#074670", //左边线的颜色
                width: "1", //坐标线的宽度
              },
            },
            axisLabel: {
              textStyle: {
                color: "#d4e3f4", //坐标值得具体的颜色
              },
              interval: 0, //如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#074670"],
                width: 1,
                type: "solid",
              },
            }, //去除网格线
            axisLabel: {
              textStyle: {
                color: "#d4e3f4", //坐标值得具体的颜色
              },
            },
          },
        ],
        series: [
          {
            radius: "100%",
            name: "学生",
            type: "bar",
            data: this.userLoginData.studentLoginData.series[0].data,
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#21fffc" },
                  { offset: 1, color: "#08afdf" },
                ]),
                barBorderRadius: [0, 0, 0, 0],
              },
            },
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              textStyle: {
                //数值样式
                color: "#21fffc",
                fontSize: 12,
                fontWeight: 600,
              },
            },
          },
          {
            radius: "100%",
            name: "老师",
            type: "bar",
            data: this.userLoginData.teacherLoginData.series[0].data,
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#f7c823" },
                  { offset: 1, color: "#bc6d1e" },
                ]),
                barBorderRadius: [0, 0, 0, 0],
              },
            },
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              textStyle: {
                //数值样式
                color: "#f7c823",
                fontSize: 12,
                fontWeight: 600,
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },

    //列表滚动
    roll(t, elList, elList_copy, review, timer) {
      let ul1 = this.$refs[elList];
      let ul2 = this.$refs[elList_copy];
      let ulbox = this.$refs[review];
      ul2.innerHTML = ul1.innerHTML + ul1.innerHTML; // 将ul1的内容复制一份接到ul2的末尾
      ulbox.scrollTop = 0; // 开始无滚动时设为0
      this[timer] = setInterval(() => {
        let heightCss =
          window.getComputedStyle(ulbox).height.replace("px", "") - 0;
        // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
        if (ulbox.scrollTop + heightCss >= ul1.scrollHeight) {
          // 当滚动到ul1的末尾时
          ulbox.scrollTop = 0; // 将scrollTop设为0，重新开始滚动
        } else {
          ulbox.scrollTop++; // 否则将scrollTop加1，实现向上滚动的效果
        }
      }, t);

      // 鼠标移入div时暂停滚动
      ulbox.onmouseover = () => {
        clearInterval(this[timer]);
      };
      // 鼠标移出div后继续滚动
      ulbox.onmouseout = () => {
        this[timer] = setInterval(() => {
          let heightCss =
            window.getComputedStyle(ulbox).height.replace("px", "") - 0;
          // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
          if (ulbox.scrollTop + heightCss >= ul1.scrollHeight) {
            // 当滚动到ul1的末尾时
            ulbox.scrollTop = 0; // 将scrollTop设为0，重新开始滚动
          } else {
            ulbox.scrollTop++; // 否则将scrollTop加1，实现向上滚动的效果
          }
        }, t);
      };
    },
  },
};
</script>
<style scoped lang="scss">
.screen_container {
  width: 1920px;
  height: 1080px;
  background-image: url("./images/bg_img.png");
  background-size: cover;
}
.screen_connect {
  width: 100%;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 10px;
  &_left {
    width: 494px;
    margin: 0 32px 0 53px;
    .data_statistics_module {
      width: 100%;
      margin-bottom: 20px;
      padding-bottom: 20px;
      box-sizing: border-box;
      background: rgba(0, 86, 150, 0.15);
      .module_mid {
        display: flex;
        justify-content: space-between;
        padding: 15px 38px;
        box-sizing: border-box;
        &_left {
          display: flex;
          align-items: center;
          &_value {
            margin-left: 15px;
            display: flex;
            flex-direction: column;
            .count_to {
              font-size: 31px;
              color: #21fffc;
              font-weight: bold;
              font-family: D-DIN-PRO;
            }
            &_text {
              font-size: 16px;
              color: white;
              font-family: Alibaba PuHuiTi;
            }
          }
        }
      }
      .module_bottom {
        height: 120px;
        display: flex;
        justify-content: space-between;
        align-content: space-between;
        flex-wrap: wrap;
        padding: 0 38px;
        box-sizing: border-box;
        margin-top: 16px;
        &_item {
          display: flex;
          align-items: center;
          &_img {
            width: 40px;
            height: 40px;
          }
          &_value {
            margin-left: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .count_to {
              width: 60px;
              text-align: center;
              font-size: 20px;
              color: #ffffff;
              font-weight: bold;
              font-family: D-DIN-PRO;
            }
            span {
              font-size: 20px;
              color: #ffffff;
              font-weight: bold;
              font-family: D-DIN-PRO;
            }
            &_text {
              font-size: 16px;
              color: white;
              font-family: Alibaba PuHuiTi;
            }
          }
        }
      }
    }
    .login_detial {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);
      &_chart {
        width: 100%;
        height: 234px;
      }
    }
    .courseware_storage {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);
      .courseware_chart {
        width: 100%;
        height: 220px;
      }
    }
    .rebuild_stu_info {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);

      .select_btns {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: white;
        padding: 0 0 10px;
        box-sizing: border-box;
        position: absolute;
        left: 380px;
        margin-top: 10px;
        .btn_text {
          user-select: none;
          cursor: pointer;
          width: 80px;
          height: 30px;
          background: rgba(255, 255, 255, 0.1);
          text-align: center;
          line-height: 30px;
          border: 1px solid rgba(255, 255, 255, 0.1);
        }
      }
    }
  }
  &_mid {
    width: 760px;
    .school_name {
      margin-bottom: 50px;
      width: 100%;
      display: flex;
      justify-content: center;
      color: #21fffc;
      font-size: 31px;
      font-family: YouSheBiaoTiHei;
    }
    .branch_name {
      height: 49px;
      width: 100%;
      display: flex;
      justify-content: center;
      color: #21fffc;
      font-size: 28px;
      font-family: YouSheBiaoTiHei;
    }
    .average_course_progress {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);
    }
  }
  &_right {
    width: 494px;
    margin-left: 37px;
    .learning_warning {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);
    }
    .rebuild_stu_info {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);
    }
    .resource_usage_school {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);
    }
    .top_student {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);
    }
  }
  .table_list {
    width: 100%;
    padding: 50px 57px 0;
    box-sizing: border-box;
    .table_all {
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
      padding: 30px 44px 20px;
      box-sizing: border-box;
      height: 831px;
      background: rgba(0, 86, 150, 0.4);
      border: 2px solid #099ce8;
      .table_title {
        width: 100%;
        font-size: 30px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #ffffff;
      }
      .course_table {
        width: 100%;
        height: 730px;
      }
    }
  }
}
.screen_header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 113px;
  box-sizing: border-box;
  height: 100px;
  background-image: url("./images/screen_header.png");
  background-size: cover;

  &_text {
    font-size: 48px;
    font-weight: 400;
    background-image: -webkit-linear-gradient(top, #fdfeff, #add6e6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: YouSheBiaoTiHei;
  }
  &_btn {
    width: 122px;
  }
  &_btns {
    display: flex;
    width: 480px;
    align-items: center;
    // justify-content: space-between;
  }
}
.stu_person_num {
  width: 52px;
  height: 52px;
}

.left_title {
  width: 100%;
  height: 58px;
}

//el-table  背景透明start>>>>>>>>>>>>>>>>>>>>>>>>>>
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
}

::v-deep .el-table .el-table__header-wrapper tr th {
  background: transparent;
  border-bottom: 1px solid rgba(0, 86, 150, 0.8);
}

/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  border: 0;
  font-size: 16px;
  font-family: Alibaba PuHuiTi 2;
  font-weight: normal;
  color: #ffffff;
  background-color: transparent;
}
::v-deep .el-table th {
  font-size: 20px !important;
}

::v-deep .el-table::before {
  //去除底部白线
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
}

::v-deep .el-table tbody tr:hover > td {
  background: rgba(0, 86, 150, 0.6) !important;
}

//筛选箭头选中颜色
::v-deep .el-table .ascending .sort-caret.ascending {
  border-bottom-color: rgba(0, 86, 150, 1);
}

::v-deep .el-table .descending .sort-caret.descending {
  border-top-color: rgba(0, 86, 150, 1);
}
// 滚动条的宽度
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(0, 86, 150, 0.6);
  border-radius: 3px;
}
//el-table  背景透明end>>>>>>>>>>>>>>>>>>>>>>>>>>
.medium_all {
  width: 100%;
  padding-left: 75px;
  box-sizing: border-box;
  user-select: none;
}
.medium {
  width: 256px;
  height: 200px;
  background-image: url("../../assets/images/prize_giving_platform.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .count_to {
    font-size: 40px;
    font-family: Alibaba PuHuiTi 2;
    font-weight: bold;
    color: #21fffc;
    margin-bottom: 8px;
  }
  &_text {
    font-size: 14px;
    font-family: Alibaba PuHuiTi 2;
    font-weight: normal;
    color: #ffffff;
    margin-bottom: 130px;
  }
}
//走马灯  自定义样式
::v-deep .el-carousel__mask {
  display: none;
}
::v-deep .el-carousel__item--card {
  width: 256px;
}

.college_details {
  width: 100%;
  display: flex;
  &_left {
    .left_top {
      .space_oss {
        width: 400px;
        height: 240px;
      }
    }
  }
}
.relative {
  user-select: none;
  cursor: pointer;
  position: relative;
}
.menu_img {
  width: 115px;
  height: 43px;
}
.menu_text_left {
  position: absolute;
  top: 10px;
  left: 32px;
  font-size: 15px;
  font-weight: normal;
  font-style: italic;
  color: #ffffff;
}
.menu_text {
  position: absolute;
  top: 10px;
  left: 23px;
  font-size: 15px;
  font-weight: normal;
  font-style: italic;
  color: #ffffff;
}
.special_text {
  left: 16px !important;
}
.light_blue {
  text-shadow: 0 0 1px white, 0 0 2px #3a80fc, 0 0 3px #2c6db9, 0 0 4px white;
}
.lists_group {
  width: 100%;
  .lists_header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 0 0 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    &_item {
      text-align: center;
      font-size: 16px;
      font-weight: 400;
      font-family: Alibaba PuHuiTi;
      color: #179bfc;
    }
    //&_item:nth-child(1){
    //  text-align: left;
    //}
  }
  .lists_body {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 0 10px 10px;
    box-sizing: border-box;
    margin-top: 10px;
    border-bottom: 1px solid rgba(23, 155, 252, 0.3);
    &_item {
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
    }
    //&_item:nth-child(1){
    //  text-align: left;
    //}
  }
}
.course_name {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.rebuildList {
  width: 100%;
  height: 90px;
  overflow: hidden;
}
.rebuildList_branch_admin {
  width: 100%;
  height: 150px;
  overflow: hidden;
}
.progressList {
  width: 100%;
  height: 505px;
  overflow: hidden;
}
//学校管理员样式
.excellentCourseList {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
//branch_admin 分院管理员样式
.excellentCourseList_branch_admin {
  width: 100%;
  height: 300px;
  overflow: hidden;
}
//学校管理员样式
.topStudentList {
  width: 100%;
  height: 200px;
  overflow: hidden;
}
//branch_admin 分院管理员样式
.topStudentList_branch_admin {
  width: 100%;
  height: 340px;
  overflow: hidden;
}

.excellentCourse_pd {
  padding: 0 20px 40px 20px;
  box-sizing: border-box;
}
.rebuild_pd {
  padding: 0 20px 40px 20px;
  box-sizing: border-box;
}
.study_pd {
  padding: 0 20px 40px 20px;
  box-sizing: border-box;
}
.topStudent_pd {
  padding: 0 20px 40px 20px;
  box-sizing: border-box;
}
.map_btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: white;
  padding: 0 0 10px;
  box-sizing: border-box;
  position: absolute;
  right: 50px;
  margin-top: 10px;
  .btn_text {
    user-select: none;
    cursor: pointer;
    width: 80px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
    text-align: center;
    line-height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}
.checked {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid #7afffd !important;
  color: #7afffd;
}
.w_40 {
  width: 40px;
}
.w_50 {
  width: 50px;
}
.w_60 {
  width: 60px;
}
.w_70 {
  width: 70px;
}
.w_80 {
  width: 80px;
}
.w_90 {
  width: 90px;
}
.w_100 {
  width: 100px;
}
.w_110 {
  width: 110px;
}
.w_120 {
  width: 120px;
}
.w_140 {
  width: 140px;
}
.w_180 {
  width: 180px;
}
.add_empty {
  width: 100%;
  height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0b8cfc;
  border: 1px solid #0b8cfc;
}
.adds_empty {
  width: 100%;
  height: 122px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0b8cfc;
  border: 1px solid #0b8cfc;
}
.time_now {
  display: flex;
  align-items: center;

  &_value {
    font-size: 36px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #ffffff;
    margin-right: 20px;
  }

  .year_month_day {
    font-size: 16px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #ffffff;
  }

  .week_day {
    font-size: 16px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
